<div class="col-md-12">
  <div class="progress progress-xxxs no-margin no-radius bg-white">
    <div class="progress-bar bg-light" style="width:100%"></div>
  </div>
  <div class="panel-heading ng-scope" >
    <div class="clear">
      <div class="col-md-3">
        <div class="panel p">
          <div class="panel-heading p-v-xs p-h-sm"><i class="ti-eye text-primary"></i> 曝光量</div>
          <div class="text-2x font-bold" id="viewCount"><%= @total.view_num %><small class="text-muted"></small></div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel p">
          <div class="panel-heading p-v-xs p-h-sm"><i class="glyphicon glyphicon-hand-up text-primary"></i> 点击量</div>
          <div class="text-2x font-bold" id="clickCount"><%= @total.click_num %><small class="text-muted"></small></div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel p">
          <div class="panel-heading p-v-xs p-h-sm"><i class="fa fa-calculator text-primary"></i> 点击率</div>
          <div class="text-2x font-bold" id="acr">

          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel p">
          <div class="panel-heading p-v-xs p-h-sm"><i class="fa fa-money text-primary"></i> 花费</div>
          <div class="text-2x font-bold" id="cost">
            <%= @total.cost %>
          </div>
        </div>
      </div>
    </div>
    <div class="sltCondition">
      <select id="sltType" class="sltType" data-index="0">
        <option value="曝光量">曝光量</option>
        <option value="点击量">点击量</option>
        <option value="总花费">总花费</option>
        <option value="点击率">点击率</option>
      </select>
    </div>
    <div class="sltCondition1">
      <select id="sltType1"  class="sltType" data-index="1">
        <option value="曝光量">曝光量</option>
        <option value="点击量">点击量</option>
        <option value="总花费">总花费</option>
        <option value="点击率"  selected="selected">点击率</option>
      </select>
    </div>
    <div class="panel-body">
      <div id="dashboardChart" style="height: 400px "></div>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
  var rpts = <%= raw @rpts.to_json %>
  console.log(rpts)
    var xs = _.pluck(rpts , 'rpt_date');
  console.log(xs)
    var xsl = _.pluck(rpts, 'rpt_date');
    var clickRate= _.pluck(rpts , 'ctr');
    var leftArr=_.pluck(rpts, 'view_num');
    var leftArrMaxNum=Math.max.apply(null, leftArr);
    var rightArr=_.pluck(rpts, 'ctr');
    var rightArrMaxNum=Math.max.apply(null, rightArr);
    var maxNum="";
    var thisArr=[];
    var yyyy = 0;
    var mm = 0;
    var dd = 0;
    var now = new Date();
    //如果选择的是今天或自定义
    if(index ==1 || index == 5){
        yyyy = now.getFullYear();
        mm = (now.getMonth()+1).toString();
        dd = now.getDate().toString();
        //如果选择的是昨天
    }else if(index ==2){
        var yesterday = new Date(now.getTime()-86400000);
        yyyy = yesterday.getFullYear();
        mm = (yesterday.getMonth()+1).toString();
        dd = yesterday.getDate().toString();
    }
    //如果月份长度为1，前面加0
    if(mm.length==1){
        mm = '0'+mm;
    }
    //如果天数长度为1，前面加0
    if(dd.length==1){
        dd = '0'+dd;
    }

    //初始化图表
    var chart = echarts.init(document.getElementById("dashboardChart"),'macarons');
    //设置option1为选择今天或昨天时调用
    var option1 = {
        //气泡提示框
        tooltip: {
            trigger: 'axis',
            //根据条件设置提示框浮层的数目
            /*formatter: function (params) {
                if (params.length >= 2) {
                    return yyyy+"-"+mm+"-"+dd +" "+ params[0].name +'<br />' +
                            params[0].seriesName +" : "+ params[0].value+'<br />' +
                            params[1].seriesName +" : "+ params[1].value;
                } else {
                    return yyyy+"-"+mm+"-"+dd +" "+ params[0].name +'<br />' +
                            params[0].seriesName +" : "+ params[0].value;
                }
            }*/
        },
        title: {
            text: ''
        },
        //图例，表述数据和图形的关联
        legend: {
            data:['曝光量（次）','点击率（%）','总花费','点击量（次）']
        },
        //直角坐标系中的横轴
        xAxis: {
            data: xs,
            axisLabel: {
                formatter: function (value, idx) {
                    return value;
                }
            },
            axisTick: {
                show:false
            }
        },
        //直角坐标系中的纵轴
        yAxis: [
            {
                name : '曝光量（次）',
                type : 'value',
                min:'ymin',
                max:Math.round(leftArrMaxNum*1.25)
            },
            {
                name : '点击率（%）',
                type : 'value',
                min:'ymin',
                max:Math.round(rightArrMaxNum*1.25),
                // axisLabel : {
                //          formatter: '{value} %'
                //  }
            }
        ],

        //数据系列，共设置两个系列，每一个系列包含多个数据
        series: [{
            name: '曝光量（次）',
            type: 'line',
            itemStyle: {
                normal: {
                    // 设置颜色
                    opacity:'0,5',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: 'rgba(32,178,170,0.8)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(32,178,170,0.8)' // 100% 处的颜色
                    }], false)
                }
            },
            smooth:false,
            yAxisIndex: 0,
            // areaStyle: {
            //     normal: {}
            // },
            symbolSize: 5,
            data: _.pluck(rpts, 'view_num')
        },{
            name: '点击率（%）',
            type: 'line',
            itemStyle: {
                normal: {
                    // 设置颜色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: 'rgba(147,112,219,0.7)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(147,112,219,0.7)' // 100% 处的颜色
                    }], false)
                }
            },
            smooth:false,
            yAxisIndex: 1,
            // areaStyle: {
            //     normal: {}
            // },
            symbolSize: 5,
            data: _.pluck(rpts, 'ctr')
        }]
    }


    //如果选择的是今天或昨天，为echarts对象加载option1
        chart.setOption(option1);
    //点击下拉菜单触发事件
    $(".sltType").on("change",function(){
        //获取下拉菜单选择的值
        sltVal=($(this).val());
        //获取所选的菜单值对应的下标
        thisIndex=$(this).attr("data-index");
//        if(index==1||index==2){
            //如果所选时间为今天或昨天，调用option1Time()方法
            option1Time(sltVal,thisIndex);
            //如果所选时间是自定义,判断起始天数和结束天数是否一致
        /*} else if (index==5){
            var startTime = $('#start').val();
            var endTime = $('#end').val();
            if (startTime == endTime) {
                option1Time(sltVal,thisIndex);
            }else{
                option2Time(sltVal,thisIndex);
            }
        }
        else{
            option2Time(sltVal,thisIndex);
        }*/
    });
    function option1Time (sltVal) {
        if(sltVal=="曝光量"){
            //修改左侧y轴上方的标题
            option1.yAxis[thisIndex].name="曝光量（次）";
            //把series数组中所渲染区域改为曝光量
            option1.series[thisIndex].name="曝光量（次）";
            //把series数组中所渲染区域数据
            option1.series[thisIndex].data=_.pluck(rpts, 'view_num');
            thisArr=option1.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            option1.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            //设置所渲染区域的颜色
            option1.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(32,178,170,0.8)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(32,178,170,0.8)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option1);
        }
        else if(sltVal=="点击量"){
            option1.yAxis[thisIndex].name="点击量（次）";
            option1.series[thisIndex].data= _.pluck(rpts, 'click_num');
            option1.series[thisIndex].name="点击量（次）";
            // var pcArr=option1.series[thisIndex].data;
            // var maxData2=Math.max.apply(null, pcArr);
            // console.log(maxData2);
            // leftArr=option1.series[0].data;
            // rightArr=option1.series[1].data;
            // allArr=leftArr.concat(rightArr);
            // var maxNum=Math.max.apply(null, allArr);
            // console.log(maxNum);
            // option1.yAxis[thisIndex].max=maxNum*1.25;
            thisArr=option1.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option1.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option1.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(0,100,0,0.6)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(0,100,0,0.6)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option1);
        }
        else if(sltVal=="总花费"){
            option1.yAxis[thisIndex].name="总花费";
            option1.series[thisIndex].name="总花费";
            option1.series[thisIndex].data=_.pluck(rpts, 'cost');
            // var pmArr=option1.series[thisIndex].data;
            // var maxData3=Math.max.apply(null, pmArr);
            // console.log(maxData3);
            //   leftArr=option1.series[0].data;
            // rightArr=option1.series[1].data;
            // allArr=leftArr.concat(rightArr);
            // maxNum=Math.max.apply(null, allArr);
            // console.log(maxNum);
            // option1.yAxis[thisIndex].max=maxNum*1.25;
            thisArr=option1.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option1.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option1.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(210,105,30,0.6)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(210,105,30,0.6)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option1);
        }
        else if(sltVal=="点击率"){
            option1.yAxis[thisIndex].name="点击率（%）";
            option1.series[thisIndex].name="点击率（%）";
            option1.series[thisIndex].data=_.pluck(rpts, 'ctr');
            // var pmArr=option1.series[thisIndex].data;
            // var maxData3=Math.max.apply(null, pmArr);
            // console.log(maxData3);
            //   leftArr=option1.series[0].data;
            // rightArr=option1.series[1].data;
            // allArr=leftArr.concat(rightArr);
            // maxNum=Math.max.apply(null, allArr);
            // console.log(maxNum);
            // option1.yAxis[thisIndex].max=maxNum*1.25;
            thisArr=option1.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option1.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option1.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(147,112,219,0.7)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(147,112,219,0.7)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option1);
        }
    }
    /*function option2Time (sltVal){
        if(sltVal=="曝光量"){
            option2.yAxis[thisIndex].name="曝光量（次）";
            option2.series[thisIndex].name="曝光量（次）";
            option2.series[thisIndex].data=_.pluck(rpts, 'pv');
            thisArr=option2.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option2.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option2.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(32,178,170,0.8)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(32,178,170,0.8)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option2);
        }
        else if(sltVal=="点击量"){
            option2.yAxis[thisIndex].name="点击量（次）";
            option2.series[thisIndex].data= _.pluck(rpts, 'click_num');
            option2.series[thisIndex].name="点击量（次）";
            thisArr=option2.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option2.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option2.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(0,100,0,0.6)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(0,100,0,0.6)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option2);
        }
        else if(sltVal=="总花费"){
            option2.yAxis[thisIndex].name="总花费";
            option2.series[thisIndex].name="总花费";
            option2.series[thisIndex].data=_.pluck(rpts, 'cost');
            thisArr=option2.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option2.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option2.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(210,105,30,0.6)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(210,105,30,0.6)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option2);
        }
        else if(sltVal=="点击率"){
            option2.yAxis[thisIndex].name="点击率（%）";
            option2.series[thisIndex].name="点击率（%）";
            option2.series[thisIndex].data=_.pluck(rpts, 'ctr');
            // var pmArr=option1.series[thisIndex].data;
            // var maxData3=Math.max.apply(null, pmArr);
            // console.log(maxData3);
            //   leftArr=option1.series[0].data;
            // rightArr=option1.series[1].data;
            // allArr=leftArr.concat(rightArr);
            // maxNum=Math.max.apply(null, allArr);
            // console.log(maxNum);
            // option1.yAxis[thisIndex].max=maxNum*1.25;
            thisArr=option2.series[thisIndex].data;
            maxNum=Math.max.apply(null, thisArr);
            //设置所渲染区域的颜色
            option1.yAxis[thisIndex].max=Math.round(maxNum*1.25);
            option1.series[thisIndex].itemStyle.normal.color=new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(147,112,219,0.7)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(147,112,219,0.7)' // 100% 处的颜色
            }], false);
            echarts.init(document.getElementById("dashboardChart"),'macarons').setOption(option2);
        }
    }*/

</script>